
class Banner {
	//将要修改的元素传入
	constructor(newDiv, newLis) {
		this.oDiv = newDiv;
		this.oLi = newLis;
		this.time = null;
		//下标变量
		this.index = 0;
		console.log(this.oDiv)
		this.oDiv.style.backgroundImage = "url(img/" + this.index + ".jpg)";
		this.oLi[this.index].style.backgroundColor = "#36ab87";
		this.oLi[this.index].style.color = "#f0f0f0";
	}
	//设置背景图片
	oDivBgcimg() {
		this.oDiv.style.backgroundImage = "url(img/" + this.index + ".jpg)";
	}
	//设置li的颜色
	oLiColor() {
		for (let i = 0; i < this.oLi.length; i++) {
			if (i == this.index) {
				this.oLi[i].style.backgroundColor = "#36ab87";
				this.oLi[i].style.color = "white";
			} else {
				this.oLi[i].style.backgroundColor = "#f0f0f0";
				this.oLi[i].style.color = "#36ab87";
			}
		}
	}

	next() {
		this.index++;
		if (this.index == this.oLi.length) {
			this.index = 0;
		}
		this.oDivBgcimg();
		this.oLiColor();
	}

	prev() {
		this.index--;
		if (this.index == -1) {
			this.index = this.oLi.length - 1;
		}
		this.oDivBgcimg();
		this.oLiColor();
	}

	auto() {
		let that = this;
		this.time = setInterval(function() {
			that.next();
		}, 2000);
	}

	eventLi() {
		let that = this;
		for (let i = 0; i < this.oLi.length; i++) {
			this.oLi[i].onmouseover = function() {
				that.index = i;
				that.oDivBgcimg();
				that.oLiColor();
				clearInterval(that.time);
			}
			// this.oLi[i].onmouseout = function() {
			// 	that.auto();
			// }
		}
	}
	stopmouse() {
		let that = this;
		this.oDiv.onmouseover = function() {
			clearInterval(that.time);
		};
		this.oDiv.onmouseout = function() {
			that.auto();
		};
	}
}

function Back(but){
	but.onclick = function() {
		var time=null;
		time=setInterval(function(){
		var osTop = document.documentElement.scrollTop || document.body.scrollTop;
		var isSpeed =  Math.floor(-osTop / 8);
		document.documentElement.scrollTop = document.body.scrollTop = osTop+ isSpeed;
		if(osTop==0){
			clearInterval(time);
		}	
		},30);
	}
}

